<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="../js/vue.js"></script>
        <script src="../js/vue-router.js"></script>
    </head>
    <body>
        <!-- 路由传参的目的是什么？？
            不同路由,需要映射到同一个组件 -->
        <div id="app">
            <router-view></router-view>
            <router-link to="/index">找佩奇</router-link>
            <!-- 2传递路由参数 -->
            <router-link to="/admin/1">找乔治</router-link>
            <router-link to="/admin/2">找苏西</router-link>
            <router-link to="/admin/3">找艾米丽</router-link>
            <router-link to="/admin/4">找波利</router-link>
        </div>
        <template id="girl">
            <div>
                <h2>我是佩奇</h2>
            </div>
        </template>
        <template id="boy">
            <div>
                <h2>{{animalname}}</h2>
            </div>
        </template>
        <script>
            var Girl = Vue.component('girl',{
                template : '#girl',
            });
            var Boy = Vue.component('boy',{
                template : '#boy',
                data(){
                    return {
                        animalname : '???',
                    }
                },
                // 3通过$route获取参数,
                // mounted钩子函数 只有在组件发生切换的时候回触发，但几个路由渲染的都是同一个组件
                // 组件实例则是被反复利用 没有销毁创建的过程 mounted 则不会再被触发
                mounted(){
                    // console.log(this.$route.params.iddd)
                    var id =this.$route.params.iddd;
                    if(id == 1){
                        this.animalname = '大家好，我是恐龙乔治'
                    }else if(id == 2){
                        this.animalname = '大家好，我是小羊苏西'
                    }else if(id == 3){
                        this.animalname = '大家好，我是大象艾米丽'
                    }else if(id == 4){
                        this.animalname = '大家好，我是鹦鹉波利'
                    }
                },
                // 4解决方案 使用watch监听器 watch在路由参数发生变化时触发
                watch : {
                    $route(to,from){
                        // console.log(to)//返回当前路由参数
                        // console.log(from)//返回上一个路由参数
                        var id =to.params.iddd
                        if(id == 1){
                            this.animalname = '大家好，我是恐龙乔治'
                        }else if(id == 2){
                            this.animalname = '大家好，我是小羊苏西'
                        }else if(id == 3){
                            this.animalname = '大家好，我是大象艾米丽'
                        }else if(id == 4){
                            this.animalname = '大家好，我是鹦鹉波利'
                        }
                    }
                }

            });
            var lalala = new VueRouter({
                routes : [
                    {
                        name : 'peiqi',
                        path : '/index',
                        component : Girl
                    },
                    // 1配置路由参数 通过path属性 /:参数名称 来定义路由参数
                    {
                        name : 'qiaozhi',
                        path : '/admin/:iddd',
                        component : Boy
                    },
                ]
            });
            var vm = new Vue({
                el: '#app',
                router : lalala,
                data: {

                }
            })
        </script>
    </body>
</html>